<template>
  <div class="situation">
    <div class="situationTitle">
      <div class="left">质检情况</div>
      <div class="right">质检模板：{{ templateName }}</div>
    </div>
    <div class="tabBox">
      <div class="group_box">
        <div style="padding: 0 10px;">
          <t-radio-group @change="onRadioChange" v-model="tabValue" variant="default-filled">
            <t-radio-button :value="1">质检评分</t-radio-button>
            <t-radio-button :value="2">标签信息</t-radio-button>
            <t-radio-button :value="3">评分历史</t-radio-button>
          </t-radio-group>
        </div>

        <template v-if="isShowTab">
          <TabOne v-show="tabValue === 1"></TabOne>
          <TabTwo v-show="tabValue === 2"></TabTwo>
          <TabThree v-show="tabValue === 3"></TabThree>
        </template>

      </div>
    </div>
  </div>
</template>

<script setup>
import {inject, ref, watch} from 'vue'
import TabOne from './tabs/tabOne.vue'
import TabTwo from './tabs/tabTwo.vue'
import TabThree from './tabs/tabThree.vue'

const templateName  = inject('templateName') // 导入

const tabValue = ref(1)
const onRadioChange = (type) => {
  console.log(type)
}

let flag = inject('showFlag')
const isShowTab = ref(false)
watch(() => flag.value, (newVal, oldVal) => {
  isShowTab.value = newVal
  if(newVal) {
    tabValue.value = 1
  }
})
</script>

<style lang="scss" scoped>
.situation {
  width: 338px;
  height: 100%;
  .situationTitle {
    padding: 0 20px;
    height: 45px;
    background-color: rgba(255, 255, 255, 1);
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    .left {
      font-size: 12px;
      font-weight: 600;
      color: rgba(77, 77, 77, 1);
    }
    .right {
      margin-left: auto;
      font-size: 10px;
      font-weight: 400;
      color: rgba(89, 89, 89, 1);
    }
  }
  .tabBox {
    height: calc(100% - 46px);
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    .group_box {
      overflow: hidden;
      padding: 0 10px 0 10px;
      :deep(.t-radio-group) {
        margin-top: 8px;
        width: 100%;
        height: 28px;
        border-radius: 28px;
        background-color: rgba(246, 247, 249, 1);
        .t-radio-button {
          width: 33%;
          text-align: center;
          height: 24px;
          font-size: 11px;
          font-weight: 400;
          color: rgba(92, 91, 91, 1);
          .t-radio-button__label {
            margin: 0 auto;
          }
        }
        .t-is-checked {
          font-size: 11px;
          font-weight: 600;
          color: rgba(92, 91, 91, 1);
        }
        .t-radio-group__bg-block {
          border-radius: 24px !important;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0 4px 12px  rgba(0, 0, 0, 0.08);
        }
      }
    }
  }
}
</style>

